<template>
  <div class=" app-container">
    <el-table :data="pageList" border>
      <el-table-column label="目录" align="center">
        <template #default="{ row }">
          {{ row.list }}
        </template>
      </el-table-column>
      <el-table-column label="页面" align="center">
        <template #default="{ row }">
          {{ row.pageName }}
        </template>
      </el-table-column>
      <el-table-column label="页面路径" align="center">
        <template #default="{ row }">
          {{ row.pagePath }}
        </template>
      </el-table-column>
      <el-table-column label="显示类型" align="center">
        <template #default="{ row }">
          {{ row.displayType }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-switch v-model="row.showPrimaryKey"
            @change="togglePrimaryKeyDisplay(row.pagePath, row.showPrimaryKey)"></el-switch>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageList: [
        {
          list: '入库管理',
          pageName: '采购订单',
          pagePath: '/storage/buyStore/index',
          displayType: '主键',
          showPrimaryKey: true
        }
      ]
    };
  },
  methods: {
    togglePrimaryKeyDisplay(pagePath, show) {
      // 这里可以通过事件总线或 Vuex 来通知其他页面更新主键显示状态
      this.$root.$emit('togglePrimaryKey', { pagePath, show });
    }
  }
};
</script>

<style scoped>
/* 主容器样式：设置内边距，避免紧贴页面边缘 */
.app-container {
  padding: 20px;
}
</style>